<template>
  <div class="centent">
    <div>
      <!-- 导航 -->
       <Notivc></Notivc>
      <!-- 轮播大 -->
      <div v-if="swiperbannerData.length>0" style="height: 454px;">
        <swiperBanner v-bind:swiperbannerData="swiperbannerData"></swiperBanner>
      </div>
      <div v-else style="height: 454px;">
        <img style="margin-top: 50px;width: 96px;height: 96px;" src="../assets/loding.gif" >
      </div>
      <!-- 轮播列表 -->
      <div style="height: 240px;">
        <SwiperList v-bind:swiperlistData="swiperlistData"></SwiperList>
      </div>
      <!-- 中间位置 -->
      <div class="C-cent">
        <!-- 电竞中心 -->
        <div class="E-sports-title">
          <div>
            <div><img src="../assets/E-sports-tetle.png"></div>
          </div>
        </div>
        <div>
          <ESports></ESports>
        </div>
        <!-- 盲盒 -->
        <div class="M-tltle">
          <div>
            <div><img src="../assets/manghe-tetle.png"></div>
          </div>
         </div>
        <div>
          <HedaerBlindBox></HedaerBlindBox>
        </div>
        <!-- 最新活动 -->
        <div>
          <LatestActivities></LatestActivities>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Notivc from "../components/notice.vue"
  import SwiperList from "../components/swiper-list.vue"
  import swiperBanner from "../components/swiper-banner.vue"
  import HedaerBlindBox from "../components/HedaerBlindBox.vue"
  import ESports from "../components/E-sports.vue"
  import LatestActivities from "../components/LatestActivities.vue"
  export default {
    name: '',
    components:{
      Notivc,
      SwiperList,
      swiperBanner,
      HedaerBlindBox,
      ESports,
      LatestActivities,
    },
    data () {
      return {
        swiperlistData:[],
        swiperbannerData:[],
          isActive:true,
      }
    },
    methods: {
        addClass($event){
          $event.currentTarget.className = 'animate__bounce animate__animated';
         },
        calerClass($event){
         $event.currentTarget.className = '';
        },
        get_bannar(){
          this.$api.get('/api/home/banner', null, r => {
                   this.swiperbannerData = r.data;
                 })
        },
        get_newGetSkin(){
          this.$api.get('/api/home/newGetSkin', null, r => {
                    this.swiperlistData = r.data;
                 })
        }
    },
    mounted () {
        this.get_bannar();
        this.get_newGetSkin();
      },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .C-cent .M-tltle{
   width: 100%;
    background-color: #D2D9E1;
  }
  .E-sports-title{
    width: 100%;
     background-color: #BDC4CE;
  }
  .C-cent .M-tltle >div,.C-cent .E-sports-title >div{
    width: 1363px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    margin: 0 auto;
  }
  .M-tltle>div>div{
    width: 117px;
    height: 36px;
  }
  .M-tltle>div img{
    width: 100%;
    height: 100%;
  }
  .E-sports-title>div>div{
    width: 182px;
    height: 38px;
  }
  .E-sports-title>div img{
    width: 100%;
    height: 100%;
  }
  .a1:hover{
      transform:rotate(-90deg);
      transition:transform .5s ease-in-out;
      background-color: #7FFF00 !important;
  }

 .centent{
   background-color: rgba(18,21,27,.7);
   max-width: 2600px;
   margin: 0 auto;
 }
</style>
